<style>
    #showActionsheet{width:50px;height:50px;border-radius:50%;background-color:#ddd;opacity:0.8;position:absolute;right:25px;bottom:25px;}
    #showActionsheet div{width:40px;height:40px;border-radius:50%;background-color:#ddd;margin:5px;}
</style>
<div id="showActionsheet"><div></div></div>
<script>
    $(function () {
        var mask = $('#mask .weui-mask_transparent');
        var actionsheet = $('#navigation .weui-actionsheet');
        var actionsheet_cancel = $('#navigation .weui-actionsheet .weui-actionsheet__action');
        //mask.hide();
        $('#showActionsheet').on('click', function () {
            actionsheet.addClass('weui-actionsheet_toggle');
            mask.fadeIn(200);
        });
        mask.on('click', function () {
            actionsheet.removeClass('weui-actionsheet_toggle');
            mask.fadeOut(200);
        });
        actionsheet_cancel.on('click', function () {
            actionsheet.removeClass('weui-actionsheet_toggle');
            mask.fadeOut(200);
        });
    });
</script>
